<script>
	// Columnas de la tabla movimientoCaja
	var cols = new Array("id", "fecha", "origen", "monto", "ventaDTO.id", "entregaDTO.id");

	// document ready
	$(document).ready( function() {
		
		// Today date
		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
		
		// event binding
		$('#refreshListButton').bind('click', reloadList);
		$('#agregarButton').bind('click', showModal);
		$('#editButton').bind('click', getMovimientoCaja);
		$('#button-save-movimientoCaja').bind('click', saveMovimientoCaja);
		$('#deleteButton').bind('click', deleteMovimientoCaja);
		$('#searchButton').bind('click', searchMovimientoCaja);
		
		$('#buscar-entrega-button').bind('click', searchMovimientoCaja);
		$('#buscar-venta-button').bind('click', searchMovimientoCaja);
		
		// calendar
		$('#fecha-calendar').bind('click', function() {
			$('#fechaDP').datepicker();
			$('#fechaDP').datepicker('setValue', now);
			$('#fechaDP').datepicker('show');
		});
		
		$('#fechaInicio-calendar').bind('click', function() {
			$('#fechaInicioDP').datepicker();
			$('#fechaInicioDP').datepicker('setValue', now);
			$('#fechaInicioDP').datepicker('show');
		});

		$('#fechaFin-calendar').bind('click', function() {
			$('#fechaFinDP').datepicker();
			$('#fechaFinDP').datepicker('setValue', now);
			$('#fechaFinDP').datepicker('show');
		});
		
		// toggle de formulario de origen de movimiento
		$('#origen').change('change', toggleMovimiento);
		
		reloadList();
	});
	
	// Ventana modal para agregar / editar producots
	$("#agregarMovimientoCaja").modal();
	
	
	
	function toggleMovimiento() {
		
		var value = $('#origen').val();
		if (value == "ARQUEO") {
			$('#arqueoDTO').fadeIn();
			$('#idEntrega').attr('disabled','disabled');
			$('#idVenta').attr('disabled','disabled');
			
		} else if (value == "AJUSTE"){
			$('#idEntrega').attr('disabled','disabled');
			$('#idVenta').attr('disabled','disabled');
			
		} else {
			$('#arqueoDTO').fadeOut();
			
			$('#idEntrega').attr('disabled', null);
			$('#idVenta').attr('disabled', null);
		}
	}
	
	
	/**
	 * Abre la ventana modal de movimientoCaja
	 */
	function showModal() {

		$("#agregarMovimientoCaja").modal();

		$(':input', '#movimientoCajaForm').not(':button, :submit, :reset')
		  							.val('')
		  							.removeAttr('checked')
		  							.removeAttr('selected');

		toggleMovimiento();
	}
	
	/**
	 * Busca movimientoCajas
	 */
	function searchMovimientoCaja() {
		
		$.fn.getList('movimientosCaja_buscar', 'listaMovimientoCajas', 'movimientoCajaSearchForm', cols);
	}
	 
	 
	/**
	 * Guarda un movimientoCaja
	 */
	function saveMovimientoCaja() {
		$.fn.send('movimientosCaja_agregar', 'movimientoCajaForm', 'button-save-movimientoCaja', null, reloadList);
	}
	
	/**
	 * Borrar un movimientoCaja
	 */
	function deleteMovimientoCaja() {
		
		if (confirm("Realmente quieres eliminar este movimientoCaja?")) {
			var value = ( $(":checked")[0]).value;
			$.fn.send('movimientosCaja_borrar', null , null, 'id='+value , reloadList);
		}
	}
	
	/**
	 * Reload movimientoCaja list
	 */
	function reloadList() {
		
		$.fn.getList('movimientosCaja_getMovimientoCajas', 'listaMovimientoCajas', null, cols);
	}
	
	/**
	 * Edit movimientoCajas
	 */
	function getMovimientoCaja() {
		
		$("#agregarMovimientoCaja").modal();
		
		var value = ( $(":checked")[0]).value;
		$.fn.getById('movimientosCaja_getMovimientoCaja', value);
		
		setTimeout(toggleMovimiento, 1000);
	}
</script>

<div class="page-header">
	<h1>
		Movimientos de Caja
		<br/>
		<small>Administraci&oacute;n de movimientos de Cajas</small>
	</h1>
</div>

<div>

	
	<!-- 
		Busqueda
	 -->
	<div class="well span11" style="margin-bottom:10px;padding-bottom:0px;">
		<form id="movimientoCajaSearchForm" class="form-inline" style="margin-bottom:0px;padding-bottom:0px;">
			<div class="control-group">
				<div class="span1" style="width:80px">
					<label for="fecha">Fecha inicio:</label>
				</div>
				<div class="span3">
					<div class="input-append date" id="fechaInicioDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
	 					<input class="span2" size="16" type="text" value="01/01/1970" id="fechaInicio" name="fechaInicio">
					    <span class="add-on" id="fechaInicio-calendar"><i class="icon-calendar"></i></span>
	  				</div> 
				</div>
				<div class="span1" style="width:80px">
					<label for="fecha">Fecha fin:</label>
				</div>
				<div class="span3">
					<div class="input-append date" id="fechaFinDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
	 					<input class="span2" size="16" type="text" value="01/01/1970" id="fechaFin" name="fechaFin">
					    <span class="add-on" id="fechaFin-calendar"><i class="icon-calendar"></i></span>
	  				</div>
  				</div>
				
				<a class="btn" id="searchButton"><i class="icon-search"></i></a>
			</div>
		</form>
	</div>
	
	
	<!-- 
		Opciones
	  -->
	<div class="option-container">
		<a class="btn" id="refreshListButton"><i class="icon-refresh"></i></a>
		<a class="btn" id="agregarButton"><i class="icon-plus"></i></a>
		<a class="btn" id="editButton"><i class="icon-edit"></i></a>
		<a class="btn" id="deleteButton"><i class="icon-trash"></i></a>
	</div>
	
	
	
	<!-- 
		Listado de movimientoCajas 
	-->
	<form id="movimientoCajaListForm">
	<table class="table table-hover span12" style="margin:0">
		<thead>
			<tr>
				<th></th>
				<th>Fecha</th>
				<th>Origen</th>
				<th>Monto</th>
				<th>Venta</th>
				<th>Entrega</th>
			</tr>
		</thead>
		<tbody id="listaMovimientoCajas">
		</tbody>		
	</table>
	</form>
     
    <!--
    	 Agregar movimientoCaja 
      -->
    <div id="agregarMovimientoCaja" class="modal hide agregarModalForm" tabindex="-1" role="dialog" aria-labelledby="agregarMovimientoCajaLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel">Agregar movimiento de caja</h3>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 		
		   	<form id="movimientoCajaForm" class="form-horizontal">
				<div>
					<input type="hidden" id="id" name="movimientoCajaDTO.id" />
					
					<label class="control-label" for="fecha">Fecha</label>
					<div class="controls">
						<div class="input-append date" id="fechaDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
   							<input class="span2" size="16" type="text" value="01/01/1970" id="fecha" name="movimientoCajaDTO.fecha">
						    <span class="add-on" id="fecha-calendar"><i class="icon-calendar"></i></span>
   						</div>   		
					</div>
					
					<label class="control-label" for="origen">Origen</label>
					<div class="controls">
						<select id="origen" name="movimientoCajaDTO.origen">
							<option value="EFECTIVO">EFECTIVO</option>
							<option value="CHEQUE">CHEQUE</option>
							<option value="TARJETA">TARJETA</option>
							<option value="FINANCIERA">FINANCIERA</option>
							<option value="AJUSTE">AJUSTE</option>
							<option value="ARQUEO">ARQUEO</option>
						</select>
					</div>
				
					<label class="control-label" for="idVenta">ID Venta</label>
					<div class="controls">
    					<input class="span2" id="idVenta" name="idVenta" type="text">
					</div>
					
					<label class="control-label" for="idEntrega">ID Entrega</label>
					<div class="controls">					
    					<input class="span2" id="idEntrega" name="idEntrega" type="text">
					</div>
					
					<label class="control-label" for="monto">Monto</label>
					<div class="controls">
						<div class="input-prepend">
							<span class="add-on">$</span>
							<input type="text" class="monto" id="monto" name="movimientoCajaDTO.monto" >
						</div>
					</div>
				</div>
				
				
				<!-- Arqueo -->
				<div class="well" id="arqueoDTO" style="margin:auto; width:400px; padding:5px; padding-left:10px; margin-top:15px; display:none">
					<div><h4 style="margin-top:2px; text-align:center">Arqueo de caja</h4></div>
					<input type="hidden" id="id" name="arqueoDTO.id" />
					
					<label class="control-label" for="b100">x $100</label>
					<div class="controls">
						<input type="text" id="b100" name="arqueoDTO.b100" class="input-small">
					</div>
	   				
	   				<label class="control-label" for="b50">x $50</label>
					<div class="controls">
						<input type="text" id="b50"  name="arqueoDTO.b50" class="input-small">
					</div>

	   				<label class="control-label" for="b20">x $20</label>
					<div class="controls">
						<input type="text" id="b20" name="arqueoDTO.b20" class="input-small">
					</div>

	   				<label class="control-label" for="b10">x $10</label>
					<div class="controls">
						<input type="text" id="b10" name="arqueoDTO.b10" class="input-small">
					</div>

	   				<label class="control-label" for="b5">x $5</label>
					<div class="controls">
						<input type="text" id="b5"  name="arqueoDTO.b5" class="input-small">
					</div>

	   				<label class="control-label" for="b2">x $2</label>
					<div class="controls">
						<input type="text" id="b2"  name="arqueoDTO.b2" class="input-small">
					</div>
				</div>
				
				<div class="row" style="font-size:11px;margin-top:15px;">
					<i>
					* Al ingresar una venta o entrega se cargar&aacute; autom&aacute;ticamente, en el movimiento de caja, el monto/costo de las mismas.
					<br/>
					* Si se quiere cargar un monto diferente se debe completar el campo "monto".
					</i>
				</div>	
		    </form>
   		</div>
   		
   		<div class="modal-footer">
    		<button class="btn btn-primary" id="button-save-movimientoCaja" data-loading-text="Enviando..." >Guardar</button>
    		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    	</div>
    </div>
    
    
    
    
</div>